<script setup lang="ts">
    import type {FormDesign} from './type'

    const props = defineProps<{ baseApi: string }>()

    const {loadData, loading, model} = useDetail<FormDesign>(props.baseApi)

    const visible = ref(false)

    defineExpose({
        open: (id: string) => {
            loadData(id)
            visible.value = true
        }
    })
</script>

<template>
    <el-dialog v-model="visible" width="60%" title="详情">
        <el-descriptions v-loading="loading" :column="2" border>
                <el-descriptions-item label="表单编码" label-class-name="item-label" label-align="right">
                        {{ model.formCode }}
                </el-descriptions-item>
                <el-descriptions-item label="创建人" label-class-name="item-label" label-align="right">
                        {{ model.createByLabel }}
                </el-descriptions-item>
                <el-descriptions-item label="创建时间" label-class-name="item-label" label-align="right">
                        {{ model.createTime }}
                </el-descriptions-item>
                <el-descriptions-item label="更新人" label-class-name="item-label" label-align="right">
                        {{ model.updateByLabel }}
                </el-descriptions-item>
                <el-descriptions-item label="更新时间" label-class-name="item-label" label-align="right">
                        {{ model.updateTime }}
                </el-descriptions-item>
        </el-descriptions>

        <template #footer>
            <el-button @click="visible = false">关闭</el-button>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
</style>